<template>
  <div class="query-container">
    <el-card>
      <template #header>
        <span>信息查询</span>
      </template>
      
      <el-tabs v-model="activeTab" class="query-tabs">
        <el-tab-pane label="基本信息" name="personal">
          <div class="personal-info-content">
            <!-- 基本信息 -->
            <el-descriptions
              title="基本信息"
              :column="2"
              border
              :label-style="{ width: '140px', fontWeight: '600' }"
            >
              <el-descriptions-item label="头像" :span="2">
                <el-avatar :size="100" :src="personalInfo.avatar">
                  {{ personalInfo.name }}
                </el-avatar>
              </el-descriptions-item>
              
              <el-descriptions-item label="姓名">
                {{ personalInfo.name }}
              </el-descriptions-item>
              
              <el-descriptions-item label="学号">
                {{ personalInfo.studentId }}
              </el-descriptions-item>
              
              <el-descriptions-item label="性别">
                <el-tag :type="personalInfo.gender === '男' ? 'primary' : 'danger'" size="small">
                  {{ personalInfo.gender }}
                </el-tag>
              </el-descriptions-item>
              
              <el-descriptions-item label="出生日期">
                {{ personalInfo.birthDate }}
              </el-descriptions-item>
              
              <el-descriptions-item label="民族">
                {{ personalInfo.nationality }}
              </el-descriptions-item>
              
              <el-descriptions-item label="政治面貌">
                {{ personalInfo.politicalStatus }}
              </el-descriptions-item>
              
              <el-descriptions-item label="身份证号">
                {{ maskIdCard(personalInfo.idCard) }}
              </el-descriptions-item>
            </el-descriptions>
            
            <!-- 关联信息 -->
            <el-descriptions
              title="关联信息"
              :column="2"
              border
              :label-style="{ width: '140px', fontWeight: '600' }"
              class="info-section"
            >
              <el-descriptions-item label="所属院系">
                {{ personalInfo.college }}
              </el-descriptions-item>
              
              <el-descriptions-item label="专业">
                {{ personalInfo.major }}
              </el-descriptions-item>
              
              <el-descriptions-item label="班级">
                {{ personalInfo.class }}
              </el-descriptions-item>
              
              <el-descriptions-item label="入学年份">
                {{ personalInfo.enrollmentYear }}
              </el-descriptions-item>
              
              <el-descriptions-item label="学籍状态">
                <el-tag :type="getStatusType(personalInfo.status)" size="small">
                  {{ personalInfo.status }}
                </el-tag>
              </el-descriptions-item>
              
              <el-descriptions-item label="学制">
                {{ personalInfo.educationSystem }}
              </el-descriptions-item>
              
              <el-descriptions-item label="本人手机号">
                {{ personalInfo.phone }}
              </el-descriptions-item>
              
              <el-descriptions-item label="校内邮箱">
                {{ personalInfo.email }}
              </el-descriptions-item>
              
              <el-descriptions-item label="紧急联系人">
                <div class="editable-field">
                  <el-input
                    v-if="editingEmergencyContact"
                    v-model="tempEmergencyContact.name"
                    size="small"
                    style="width: 150px; margin-right: 8px;"
                  />
                  <span v-else>{{ personalInfo.emergencyContact.name }}</span>
                  <el-button
                    v-if="editingEmergencyContact"
                    type="primary"
                    size="small"
                    @click="saveEmergencyContact"
                  >
                    保存
                  </el-button>
                  <el-button
                    v-if="editingEmergencyContact"
                    size="small"
                    @click="cancelEditEmergencyContact"
                  >
                    取消
                  </el-button>
                  <el-button
                    v-else
                    type="primary"
                    size="small"
                    link
                    @click="editEmergencyContact"
                  >
                    修改
                  </el-button>
                </div>
              </el-descriptions-item>
              
              <el-descriptions-item label="紧急联系人电话">
                <div class="editable-field">
                  <el-input
                    v-if="editingEmergencyContact"
                    v-model="tempEmergencyContact.phone"
                    size="small"
                    style="width: 150px; margin-right: 8px;"
                  />
                  <span v-else>{{ personalInfo.emergencyContact.phone }}</span>
                </div>
              </el-descriptions-item>
            </el-descriptions>
            
            <!-- 辅导员信息 -->
            <el-descriptions
              title="辅导员信息"
              :column="2"
              border
              :label-style="{ width: '140px', fontWeight: '600' }"
              class="info-section"
            >
              <el-descriptions-item label="辅导员姓名">
                {{ personalInfo.counselor.name }}
              </el-descriptions-item>
              
              <el-descriptions-item label="办公电话">
                {{ personalInfo.counselor.officePhone }}
              </el-descriptions-item>
              
              <el-descriptions-item label="联系方式" :span="2">
                <el-button type="primary" size="small" @click="addWeChat">
                  <el-icon style="margin-right: 4px;"><ChatLineRound /></el-icon>
                  添加微信
                </el-button>
                <el-button type="success" size="small" style="margin-left: 8px;" @click="addEnterpriseWeChat">
                  <el-icon style="margin-right: 4px;"><ChatLineRound /></el-icon>
                  添加企业微信
                </el-button>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="学业信息" name="grades">
          <div class="academic-info-content">
            <!-- 学分信息 -->
            <el-descriptions
              title="学分信息"
              :column="2"
              border
              :label-style="{ width: '160px', fontWeight: '600' }"
            >
              <el-descriptions-item label="已修学分">
                <span class="credit-value">{{ creditInfo.completed }}</span>
                <span class="credit-unit">学分</span>
              </el-descriptions-item>
              
              <el-descriptions-item label="未修学分">
                <span class="credit-value">{{ creditInfo.remaining }}</span>
                <span class="credit-unit">学分</span>
              </el-descriptions-item>
              
              <el-descriptions-item label="必修学分">
                <div class="credit-progress">
                  <span class="credit-text">
                    {{ creditInfo.required.completed }}/{{ creditInfo.required.total }} 学分
                  </span>
                  <el-progress
                    :percentage="getCreditPercentage(creditInfo.required.completed, creditInfo.required.total)"
                    :color="getCreditProgressColor(creditInfo.required.completed, creditInfo.required.total)"
                    :stroke-width="10"
                    style="margin-top: 8px;"
                  />
                </div>
              </el-descriptions-item>
              
              <el-descriptions-item label="选修学分">
                <div class="credit-progress">
                  <span class="credit-text">
                    {{ creditInfo.elective.completed }}/{{ creditInfo.elective.total }} 学分
                  </span>
                  <el-progress
                    :percentage="getCreditPercentage(creditInfo.elective.completed, creditInfo.elective.total)"
                    :color="getCreditProgressColor(creditInfo.elective.completed, creditInfo.elective.total)"
                    :stroke-width="10"
                    style="margin-top: 8px;"
                  />
                </div>
              </el-descriptions-item>
              
              <el-descriptions-item label="总学分要求">
                <span class="credit-value">{{ creditInfo.totalRequired }}</span>
                <span class="credit-unit">学分</span>
              </el-descriptions-item>
              
              <el-descriptions-item label="完成进度">
                <div class="credit-progress">
                  <span class="credit-text">
                    {{ getCreditPercentage(creditInfo.completed, creditInfo.totalRequired) }}%
                  </span>
                  <el-progress
                    :percentage="getCreditPercentage(creditInfo.completed, creditInfo.totalRequired)"
                    :color="getCreditProgressColor(creditInfo.completed, creditInfo.totalRequired)"
                    :stroke-width="10"
                    style="margin-top: 8px;"
                  />
                </div>
              </el-descriptions-item>
            </el-descriptions>
            
            <!-- 选课信息 -->
            <div class="course-section">
              <h3 class="section-title">当前学期已选课程表</h3>
              <el-table
                :data="courseSchedule"
                stripe
                style="width: 100%"
                :empty-text="'暂无选课信息'"
              >
                <el-table-column prop="courseName" label="课程名称" width="200" align="left" />
                <el-table-column prop="time" label="时间" width="180" align="left">
                  <template #default="{ row }">
                    <div class="course-time">
                      <el-tag type="info" size="small" style="margin-right: 8px;">
                        {{ row.dayOfWeek }}
                      </el-tag>
                      <span>{{ row.time }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="location" label="地点" width="150" align="left" />
                <el-table-column prop="teacher" label="授课教师" width="150" align="left" />
                <el-table-column prop="credit" label="学分" width="80" align="center" />
                <el-table-column prop="courseType" label="课程类型" width="100" align="center">
                  <template #default="{ row }">
                    <el-tag :type="row.courseType === '必修' ? 'success' : 'warning'" size="small">
                      {{ row.courseType }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="考勤记录" name="attendance">
          <el-table :data="attendanceData" style="width: 100%">
            <el-table-column prop="date" label="日期" />
            <el-table-column prop="course" label="课程" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag :type="scope.row.status === '出勤' ? 'success' : 'danger'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" />
          </el-table>
        </el-tab-pane>
        
        <el-tab-pane label="绩点信息" name="gpa">
          <div class="gpa-info-content">
            <!-- 学期选择 -->
            <div class="semester-selector">
              <el-form :inline="true" :model="gpaForm">
                <el-form-item label="选择学期">
                  <el-select
                    v-model="gpaForm.semester"
                    placeholder="请选择学期"
                    style="width: 200px"
                    @change="handleSemesterChange"
                  >
                    <el-option
                      v-for="semester in semesterList"
                      :key="semester.value"
                      :label="semester.label"
                      :value="semester.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            
            <!-- 绩点统计 -->
            <div v-if="currentSemesterGPA" class="gpa-statistics">
              <el-descriptions
                title="学期绩点统计"
                :column="4"
                border
                :label-style="{ width: '120px', fontWeight: '600' }"
              >
                <el-descriptions-item label="平均绩点">
                  <span class="gpa-value">{{ currentSemesterGPA.averageGPA }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="加权平均分">
                  <span class="gpa-value">{{ currentSemesterGPA.weightedAverage }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="总学分">
                  <span class="gpa-value">{{ currentSemesterGPA.totalCredits }}</span>
                  <span class="credit-unit">学分</span>
                </el-descriptions-item>
                <el-descriptions-item label="课程数量">
                  <span class="gpa-value">{{ currentSemesterGPA.courseCount }}</span>
                  <span class="credit-unit">门</span>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            
            <!-- 课程绩点列表 -->
            <div class="gpa-course-section">
              <h3 class="section-title">课程绩点详情</h3>
              <el-table
                :data="currentSemesterCourses"
                stripe
                style="width: 100%"
                :empty-text="'请选择学期查看绩点信息'"
              >
                <el-table-column prop="courseName" label="课程名称" width="200" align="left" />
                <el-table-column prop="credit" label="学分" width="80" align="center" />
                <el-table-column prop="regularScore" label="平时成绩" width="100" align="center">
                  <template #default="{ row }">
                    <span :class="getScoreClass(row.regularScore)">
                      {{ row.regularScore }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="finalScore" label="期末成绩" width="100" align="center">
                  <template #default="{ row }">
                    <span :class="getScoreClass(row.finalScore)">
                      {{ row.finalScore }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="totalScore" label="总成绩" width="100" align="center">
                  <template #default="{ row }">
                    <span :class="getScoreClass(row.totalScore)" class="total-score">
                      {{ row.totalScore }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="gpa" label="绩点" width="100" align="center">
                  <template #default="{ row }">
                    <el-tag :type="getGPAType(row.gpa)" size="small">
                      {{ row.gpa }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="grade" label="等级" width="100" align="center">
                  <template #default="{ row }">
                    <el-tag :type="getGradeType(row.grade)" size="small">
                      {{ row.grade }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="teacher" label="科任老师" width="150" align="left" />
              </el-table>
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ChatLineRound } from '@element-plus/icons-vue'
import { getStudentById } from '../api/studentInfo'
import type { StudentInfo } from '../api/studentInfo'

const activeTab = ref('personal')
const loading = ref(false)

// 个人信息数据
const personalInfo = reactive({
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  name: '',
  studentId: '',
  gender: '男',
  birthDate: '',
  nationality: '',
  politicalStatus: '',
  idCard: '',
  college: '',
  major: '',
  class: '',
  enrollmentYear: '',
  status: '正常',
  educationSystem: '',
  phone: '',
  email: '',
  emergencyContact: {
    name: '',
    phone: ''
  },
  counselor: {
    name: '',
    officePhone: ''
  }
})

// 紧急联系人编辑状态
const editingEmergencyContact = ref(false)
const tempEmergencyContact = reactive({
  name: '',
  phone: ''
})

// 身份证号脱敏函数
const maskIdCard = (idCard: string) => {
  if (!idCard || idCard.length < 8) return idCard
  const start = idCard.substring(0, 6)
  const end = idCard.substring(idCard.length - 4)
  const middle = '*'.repeat(Math.max(0, idCard.length - 10))
  return `${start}${middle}${end}`
}

// 获取学籍状态标签类型
const getStatusType = (status: string) => {
  switch (status) {
    case '正常':
      return 'success'
    case '休学':
      return 'warning'
    case '复学':
      return 'info'
    case '毕业待审核':
      return ''
    default:
      return ''
  }
}

// 编辑紧急联系人
const editEmergencyContact = () => {
  editingEmergencyContact.value = true
  tempEmergencyContact.name = personalInfo.emergencyContact.name
  tempEmergencyContact.phone = personalInfo.emergencyContact.phone
}

// 保存紧急联系人
const saveEmergencyContact = async () => {
  if (!tempEmergencyContact.name || !tempEmergencyContact.phone) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      '修改紧急联系人信息需要审核生效，是否确认提交？',
      '确认修改',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    // 这里应该调用API提交审核
    personalInfo.emergencyContact.name = tempEmergencyContact.name
    personalInfo.emergencyContact.phone = tempEmergencyContact.phone
    editingEmergencyContact.value = false
    ElMessage.success('修改申请已提交，等待审核生效')
  } catch {
    // 用户取消
  }
}

// 取消编辑紧急联系人
const cancelEditEmergencyContact = () => {
  editingEmergencyContact.value = false
  tempEmergencyContact.name = ''
  tempEmergencyContact.phone = ''
}

// 添加微信
const addWeChat = () => {
  ElMessage.info(`正在跳转到微信添加页面，辅导员微信：${personalInfo.counselor.name}`)
  // 这里可以添加实际的微信添加逻辑
}

// 添加企业微信
const addEnterpriseWeChat = () => {
  ElMessage.info(`正在跳转到企业微信添加页面，辅导员企业微信：${personalInfo.counselor.name}`)
  // 这里可以添加实际的企业微信添加逻辑
}

// 学分信息
const creditInfo = reactive({
  completed: 85, // 已修学分
  remaining: 35, // 未修学分
  totalRequired: 120, // 总学分要求
  required: {
    completed: 70, // 已修必修学分
    total: 90 // 总必修学分要求
  },
  elective: {
    completed: 15, // 已修选修学分
    total: 30 // 总选修学分要求
  }
})

// 当前学期已选课程表
const courseSchedule = ref([
  {
    courseName: '数据结构',
    dayOfWeek: '周一',
    time: '08:00-09:40',
    location: '教学楼A-101',
    teacher: '王教授',
    credit: 4,
    courseType: '必修'
  },
  {
    courseName: '数据库系统原理',
    dayOfWeek: '周三',
    time: '10:00-11:40',
    location: '教学楼B-205',
    teacher: '李教授',
    credit: 3,
    courseType: '必修'
  },
  {
    courseName: '算法分析与设计',
    dayOfWeek: '周五',
    time: '14:00-15:40',
    location: '教学楼A-301',
    teacher: '张教授',
    credit: 4,
    courseType: '必修'
  },
  {
    courseName: '人工智能导论',
    dayOfWeek: '周二',
    time: '08:00-09:40',
    location: '教学楼C-102',
    teacher: '赵教授',
    credit: 2,
    courseType: '选修'
  },
  {
    courseName: '软件工程',
    dayOfWeek: '周四',
    time: '10:00-11:40',
    location: '教学楼B-301',
    teacher: '刘教授',
    credit: 3,
    courseType: '必修'
  }
])

// 计算学分百分比
const getCreditPercentage = (completed: number, total: number) => {
  if (total === 0) return 0
  return Math.round((completed / total) * 100)
}

// 获取学分进度条颜色
const getCreditProgressColor = (completed: number, total: number) => {
  const percentage = getCreditPercentage(completed, total)
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 60) return '#e6a23c'
  return '#f56c6c'
}

const attendanceData = ref([
  { date: '2024-01-15', course: '高等数学', status: '出勤', remark: '' },
  { date: '2024-01-14', course: '线性代数', status: '出勤', remark: '' },
  { date: '2024-01-13', course: '程序设计', status: '缺勤', remark: '病假' }
])

// 绩点信息相关
interface CourseGPA {
  courseName: string // 课程名称
  credit: number // 学分
  regularScore: number // 平时成绩
  finalScore: number // 期末成绩
  totalScore: number // 总成绩
  gpa: number // 绩点
  grade: string // 等级（A+, A, A-, B+, B, B-, C+, C, D, F）
  teacher: string // 科任老师
}

interface SemesterGPA {
  averageGPA: string // 平均绩点
  weightedAverage: string // 加权平均分
  totalCredits: number // 总学分
  courseCount: number // 课程数量
}

// 学期列表
const semesterList = ref([
  { label: '2024年春季学期', value: '2024-spring' },
  { label: '2023年秋季学期', value: '2023-fall' },
  { label: '2023年春季学期', value: '2023-spring' },
  { label: '2022年秋季学期', value: '2022-fall' }
])

// 绩点表单
const gpaForm = reactive({
  semester: '2024-spring' // 默认选择当前学期
})

// 各学期课程绩点数据
const semesterGPAData = ref<Record<string, CourseGPA[]>>({
  '2024-spring': [
    {
      courseName: '数据结构',
      credit: 4,
      regularScore: 92,
      finalScore: 88,
      totalScore: 89,
      gpa: 3.7,
      grade: 'A-',
      teacher: '王教授'
    },
    {
      courseName: '数据库系统原理',
      credit: 3,
      regularScore: 85,
      finalScore: 90,
      totalScore: 88,
      gpa: 3.5,
      grade: 'B+',
      teacher: '李教授'
    },
    {
      courseName: '算法分析与设计',
      credit: 4,
      regularScore: 95,
      finalScore: 93,
      totalScore: 94,
      gpa: 4.0,
      grade: 'A',
      teacher: '张教授'
    },
    {
      courseName: '人工智能导论',
      credit: 2,
      regularScore: 88,
      finalScore: 85,
      totalScore: 86,
      gpa: 3.3,
      grade: 'B',
      teacher: '赵教授'
    },
    {
      courseName: '软件工程',
      credit: 3,
      regularScore: 90,
      finalScore: 87,
      totalScore: 88,
      gpa: 3.5,
      grade: 'B+',
      teacher: '刘教授'
    }
  ],
  '2023-fall': [
    {
      courseName: '高等数学',
      credit: 4,
      regularScore: 85,
      finalScore: 82,
      totalScore: 83,
      gpa: 3.0,
      grade: 'B',
      teacher: '陈教授'
    },
    {
      courseName: '线性代数',
      credit: 3,
      regularScore: 92,
      finalScore: 90,
      totalScore: 91,
      gpa: 3.8,
      grade: 'A-',
      teacher: '周教授'
    },
    {
      courseName: '程序设计',
      credit: 4,
      regularScore: 88,
      finalScore: 85,
      totalScore: 86,
      gpa: 3.3,
      grade: 'B',
      teacher: '吴教授'
    }
  ],
  '2023-spring': [
    {
      courseName: '计算机组成原理',
      credit: 4,
      regularScore: 87,
      finalScore: 84,
      totalScore: 85,
      gpa: 3.2,
      grade: 'B',
      teacher: '郑教授'
    },
    {
      courseName: '操作系统',
      credit: 4,
      regularScore: 90,
      finalScore: 88,
      totalScore: 89,
      gpa: 3.7,
      grade: 'A-',
      teacher: '孙教授'
    }
  ],
  '2022-fall': [
    {
      courseName: '大学英语',
      credit: 2,
      regularScore: 85,
      finalScore: 80,
      totalScore: 82,
      gpa: 3.0,
      grade: 'B',
      teacher: '钱教授'
    },
    {
      courseName: '大学物理',
      credit: 3,
      regularScore: 88,
      finalScore: 85,
      totalScore: 86,
      gpa: 3.3,
      grade: 'B',
      teacher: '李教授'
    }
  ]
})

// 当前学期课程数据
const currentSemesterCourses = computed(() => {
  return semesterGPAData.value[gpaForm.semester] || []
})

// 当前学期绩点统计
const currentSemesterGPA = computed<SemesterGPA | null>(() => {
  const courses = currentSemesterCourses.value
  if (courses.length === 0) return null
  
  const totalCredits = courses.reduce((sum: number, course: CourseGPA) => sum + course.credit, 0)
  const totalGPA = courses.reduce((sum: number, course: CourseGPA) => sum + course.gpa * course.credit, 0)
  const totalScore = courses.reduce((sum: number, course: CourseGPA) => sum + course.totalScore * course.credit, 0)
  
  return {
    averageGPA: totalCredits > 0 ? (totalGPA / totalCredits).toFixed(2) : '0.00',
    weightedAverage: totalCredits > 0 ? (totalScore / totalCredits).toFixed(2) : '0.00',
    totalCredits,
    courseCount: courses.length
  }
})

// 处理学期切换
const handleSemesterChange = () => {
  // 学期切换时自动更新数据
}

// 获取分数样式类
const getScoreClass = (score: number) => {
  if (score >= 90) return 'score-excellent'
  if (score >= 80) return 'score-good'
  if (score >= 70) return 'score-medium'
  if (score >= 60) return 'score-pass'
  return 'score-fail'
}

// 获取绩点标签类型
const getGPAType = (gpa: number) => {
  if (gpa >= 3.7) return 'success'
  if (gpa >= 3.0) return 'primary'
  if (gpa >= 2.0) return 'warning'
  return 'danger'
}

// 获取等级标签类型
const getGradeType = (grade: string) => {
  if (grade.startsWith('A')) return 'success'
  if (grade.startsWith('B')) return 'primary'
  if (grade.startsWith('C')) return 'warning'
  if (grade.startsWith('D')) return 'info'
  return 'danger'
}

// 获取学生信息
const fetchStudentInfo = async () => {
  try {
    // 从 localStorage 获取登录时保存的 userId
    const userInfoStr = localStorage.getItem('userInfo')
    if (!userInfoStr) {
      ElMessage.warning('请先登录')
      return
    }

    const userInfo = JSON.parse(userInfoStr)
    const userId = userInfo.userId

    if (!userId) {
      ElMessage.warning('用户信息不完整，请重新登录')
      return
    }

    loading.value = true
    const response = await getStudentById(userId)

    // 兼容 code 为 '0' 或 '200' 都表示成功
    if ((response.code === '200' || response.code === '0') && response.data) {
      const studentData = response.data as StudentInfo
      
      // 将接口返回的数据映射到 personalInfo
      personalInfo.name = studentData.name || ''
      personalInfo.studentId = studentData.studentNum || ''
      personalInfo.phone = studentData.phone || ''
      personalInfo.class = studentData.className || ''
      personalInfo.counselor.name = studentData.counselor || ''
      
      ElMessage.success('学生信息加载成功')
    } else {
      ElMessage.error(response.msg || '获取学生信息失败')
    }
  } catch (error) {
    ElMessage.error('获取学生信息失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取学生信息
onMounted(() => {
  fetchStudentInfo()
})
</script>

<style scoped>
.query-container {
  padding: 0;
}

.query-tabs {
  margin-top: 20px;
}

.personal-info-content {
  padding: 20px 0;
}

.info-section {
  margin-top: 24px;
}

/* 描述列表样式 */
:deep(.el-descriptions__title) {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-descriptions__body .el-descriptions__table td) {
  padding: 16px;
}

/* 可编辑字段样式 */
.editable-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 头像样式 */
:deep(.el-avatar) {
  border: 2px solid #e4e7ed;
}

/* 学业信息内容样式 */
.academic-info-content {
  padding: 20px 0;
}

/* 学分信息样式 */
.credit-value {
  font-size: 20px;
  font-weight: 600;
  color: #409eff;
  margin-right: 4px;
}

.credit-unit {
  font-size: 14px;
  color: #909399;
}

.credit-progress {
  width: 100%;
}

.credit-text {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

/* 选课信息样式 */
.course-section {
  margin-top: 24px;
}

.course-time {
  display: flex;
  align-items: center;
}

/* 表格对齐样式 */
.course-section :deep(.el-table) {
  text-align: left;
}

.course-section :deep(.el-table th),
.course-section :deep(.el-table td) {
  text-align: left !important;
}

/* 绩点信息内容样式 */
.gpa-info-content {
  padding: 20px 0;
}

/* 学期选择器样式 */
.semester-selector {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

/* 绩点统计样式 */
.gpa-statistics {
  margin-bottom: 24px;
}

.gpa-value {
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}

/* 绩点课程列表样式 */
.gpa-course-section {
  margin-top: 24px;
}

/* 分数样式 */
.score-excellent {
  color: #67c23a;
  font-weight: 600;
}

.score-good {
  color: #409eff;
  font-weight: 500;
}

.score-medium {
  color: #e6a23c;
  font-weight: 500;
}

.score-pass {
  color: #909399;
}

.score-fail {
  color: #f56c6c;
  font-weight: 600;
}

.total-score {
  font-size: 16px;
  font-weight: 600;
}

/* 绩点表格对齐样式 */
.gpa-course-section :deep(.el-table) {
  text-align: left;
}

.gpa-course-section :deep(.el-table th),
.gpa-course-section :deep(.el-table td) {
  text-align: left !important;
}
</style>
